<template>
	<view class="swiperFather isBFC">
		<image :src="swiperList[swiperCurrent]" mode="widthFix" style="width: 100%;display: flex;"></image>
		<uni-swiper-dot :info="swiperList" :current="swiperCurrent" mode="round">
			<swiper class="swiper_box" @change="onSwiperChange" autoplay circular interval="3000">
				<swiper-item v-for="(item, index) in swiperList" :key="item.pic" @click="previewBanner(index)">
					<fr-image class="img" :src="item" lazy-load mode="widthFix" loadingIngImg="two-balls" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const props = defineProps({
		data: Object,
		imgHost: String,
	})
	const swiperConfig = props.data;

	const swiperList = computed(() => swiperConfig.data.map(item => props.imgHost + item));
	const swiperStyle = computed(() => {
		return {
			marginBottom: swiperConfig.style.marginbottom + 'px',
		}
	});

	const swiperCurrent = ref(0);
	const onSwiperChange = (e) => {
		swiperCurrent.value = e.detail.current;
	};
	const previewBanner = (index) => {
		if (swiperList.value.length === 0) return;
		const urls = swiperList.value.map((item) => {
			return item;
		});
		uni.previewImage({
			current: index,
			urls,
			loop: true,
			indicator: 'default',
		});
	};
</script>

<style lang="scss" scoped>
	.swiperFather {
		position: relative;
		width: 100%;
	}

	::v-deep .uni-swiper__warp {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.swiper_box {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 20;

		.img {
			width: 100%;
		}
	}

	::v-deep .uni-swiper__dots-item {
		z-index: 99;
		height: 4px !important;
		width: 4px !important;
	}

	::v-deep .uni-swiper__dots-long {
		width: 15px !important;
	}
</style>